<template>
    <el-dialog :title="!isupdate ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
        <el-form :model="studentData" :rules="studentRule" ref="studentData" @keyup.enter.native="dataFormSubmit()"
            label-width="120px">
            <el-form-item label="学号" prop="sid">
                <el-input v-model="studentData.sid" :readonly="id?true:false" placeholder="请输入学号">
                </el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="studentData.name" placeholder="请输入姓名">
                </el-input>
            </el-form-item>

            <el-form-item label="联系方式" prop="mobile">
                <el-input v-model="studentData.mobile" placeholder="请输入联系方式">
                </el-input>
            </el-form-item>

            <el-form-item label="身份证号码" prop="certNo">
                <el-input v-model="studentData.certNo" placeholder="请输入身份证号码">
                </el-input>
            </el-form-item>

            <el-form-item label="籍贯" prop="local">
                <el-input v-model="studentData.local" placeholder="请输入籍贯">
                </el-input>
            </el-form-item>
            <el-form-item label="政治面貌" prop="political">

                <el-select class="select" v-model="studentData.political" placeholder="请选择政治面貌">
                    <el-option key="群众" label="群众" value="群众"></el-option>
                    <el-option key="共青团员" label="共青团员" value="共青团员"></el-option>

                </el-select>

            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="专业班级" prop="deptId">
                        <el-popover ref="parentName" placement="bottom-start" trigger="click">
                            <el-tree :data="deptList" :props="deptListTreeProps" node-key="deptId" ref="deptListTree"
                                @current-change="changedept" :default-expand-all="true" :highlight-current="true"
                                :expand-on-click-node="false">
                            </el-tree>
                        </el-popover>
                        <el-input v-model="studentData.dept.deptName" v-popover:parentName :readonly="true"
                            placeholder="点击选择学院" class="menu-studentData"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label-width="7px" prop="majorId">
                        <el-popover ref="majorName" placement="bottom-start" trigger="click">
                            <el-tree :data="majorList" :props="majorListTreeProps" node-key="majorId"
                                ref="majorListTree" @current-change="majortListTreeCurrentChangeHandle"
                                :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false">
                            </el-tree>
                        </el-popover>
                        <el-input v-model="studentData.major.majorName" v-popover:majorName :readonly="true"
                            placeholder="点击选择专业" class="menu-studentData"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label-width="7px" prop="cid">
                        <el-popover ref="classCode" placement="bottom-start" trigger="click">
                            <el-tree :data="classList" :props="classListTreeProps" node-key="classId"
                                ref="classListTree" @current-change="classListTreeCurrentChangeHandle"
                                :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false">
                            </el-tree>
                        </el-popover>
                        <el-input v-model="studentData.classCode" v-popover:classCode :readonly="true"
                            placeholder="点击选择班级" class="menu-classData"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>







        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {  majorApi, deptApi, classApi } from '@/api/baseinfo';
import{studentApi} from '@/api/student'
import { clone, treeDataToList } from '@/utils';

export default {
    components: {},
    props: {},
    data() {
        return {
            id:0,
            visible: false,
            isupdate: false,
            studentData: {
                sid: null,
                majarId: 0,
                deptId: '',
                cid: '',
                classCode: '',
                name: '',
                mobile: '',
                //身份证号码
                certNo: '',
                //籍贯
                local: '',
                //政治面貌
                political: '',
                major: {
                    majorName: ''
                },
                dept: {
                    deptId: 0,
                    deptName: ''
                }


            },
            studentRule: {
                sid: { required: true, message: '学号不能为空', trigger: 'blur' },

                cid: { required: true, message: '班级不能为空', trigger: 'blur' },
                name: { required: true, message: '姓名不能为空', trigger: 'blur' },
                mobile: { required: true, message: '联系方式不能为空', trigger: 'blur' },
                //身份证号码
                certNo: { required: true, message: '身份证号码不能为空', trigger: 'blur' },
                //籍贯
                local: { required: true, message: '籍贯不能为空', trigger: 'blur' },
                //政治面貌
                political: { required: true, message: '政治面貌不能为空', trigger: 'blur' },

            },
            majorList: [],
            majorListTreeProps: {
                label: 'majorName',
                children: 'list'
            },
            deptList: [],
            deptListTreeProps: {
                label: 'deptName',
                children: 'list'
            },
            classList: [],
            classListTreeProps: {
                label: 'classCode',
                children: 'list'
            }

        };
    },
    watch: {},
    computed: {},
    methods: {
        init(id) {
            // 默认获取所有专业
            this.id = id
          if (id) {
            this.isupdate = true
            studentApi.getStudentInfo(id).then((res) => {
              if (res) {
                this.studentData = res.student
                console.log(res)
              }
              // 显示窗口
              this.visible = true

            })
          } else{
            this.$nextTick(() => {
              this.studentData = this.$options.data().studentData
              this.visible = true
            })
          }

            majorApi.listMajorNoPage().then(({ data }) => {

                this.majorList = data
            }).then(() => {
                // 请求获取部门列表
                return Promise.resolve(deptApi.getdeptListTree())
            }).then(({ data }) => {
                this.deptList = data
            }).then(() => {
                //获取班级列表
                return Promise.resolve(classApi.listClassNoPage())
            }).then(({ data }) => {
                this.classList = data;

            })






        },
        changedept(data, node) {
            let deptId = data.deptId
            this.studentData.dept.deptName = data.deptName

            majorApi.listMajorNoPage({ deptId: deptId }).then(({ data }) => {
                this.majorList = data
            })
        },
        majortListTreeCurrentChangeHandle(data, node) {

            this.studentData.majorId = data.majorId
            this.studentData.major.majorName = data.majorName

            classApi.listClassNoPage({ "majorId": data.majorId }).then(({ data }) => {

                this.classList = data
            })


        },
        classListTreeCurrentChangeHandle(data, node) {
            this.studentData.cid = data.classId
            this.studentData.classCode = data.classCode
            this.$refs['studentData'].validate()
        },

        dataFormSubmit() {
            this.$refs['studentData'].validate((valid) => {
                if (valid) {
                    studentApi.saveOrUpdate(this.studentData, this.isupdate ? 'update' : 'save').then(() => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })

                    })
                }
            })


        }
    },
    created() { },
    mounted() { }
};
</script>

<style lang="scss">
.select{
    width: 100%;
}

</style>

<style lang="scss" scoped>

</style>
